<template>
	<view class="steps">

		<view class="tail">
			
		</view> <!-- :color="activeColor"-->
		<uni-icons
		class="node" 
		:color="item[date]?'#00B48D':'#909090'"
		:type="item[date]?'checkbox-filled':'checkbox'" 
		:class="{'active-node':activity === index,'active-color':activity === index,}" 
		size="14"></uni-icons>
		<!-- <view class="node" :class="{'active-node':activity === index}"></view> -->
		<!-- <view class="node" v-if="item[isActive]===false" :class="{'active-node':activity === index}"></view> -->
		<view class="wrapper">
			<view class="">
				<!-- {{item[isActive]}} -->
				<text>{{item[wrapperStatus]}}</text>
				<slot name='status'></slot>
			</view>
			<view class="wrapperTitle">
				
				<text>{{item[wrapperTitle]}}</text>
				<slot name='content'></slot>
			</view>
			<view class="wrapperTitle">
				<view class="">
					<!-- <text>{{item[date] | dateFormat('yyyy-MM-dd')}}</text> -->
					<text>{{item[date]}}</text>
					<slot name='dateTop'></slot>
				</view>
				<!-- <view class=""> -->
					<!-- 全局filter时间格式化 -->
					<!-- <text>{{item[date] | dateFormat('hh:mm:ss')}}</text>
					<slot name='dateBot'></slot>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	/*
	activity: 当前进度条状态
	wrapperStatus：流程状态对应字段
	wrapperTitle：详情对应字段
	index：进度条
	date：时间
	 */
	export default {
		name: 'm-steps',
		data() {
			return {

			}
		},
		props: {
			item: {
				type: Object,
			},
			activity: {
				type: Number,
				default: 0
			},
			wrapperStatus: {
				type: String,
				default: 'status'
			},
			wrapperTitle: {
				type: String,
				default: 'content'
			},
			date: {
				type: String,
				default: 'expressTime'
			},
			activeColor:{
				type: String,
				default: '#ff0000'
			},
			isActive: {
				type: String,
				default: 'isActive'
			},
			index: {
				type: Number,
				default: 0
			}
		}
	}
</script>

<style lang="scss" scoped>
		.steps {
			position: relative;
			margin-top: 5rpx;

			// &:last-child {
			// 	.tail {
			// 		display: none;
			// 		border-left: 2px solid #e4e7ed !important
			// 	}
			// }

			.date {
				position: absolute;
				top: -6rpx;
				color: #AAAAAA;
				text-align: center;
				font-size: 30rpx;
			}
			/* 激活的连接线 第一根 */
			.active-tail {
				border-left: 2px solid #e4e7ed !important
			}
			/* 激活的连接线 第一根 */
			.active-node {
				background-color: rgb(255, 255, 255) !important;
			}
			
			.active-color{
				color: $my-newh5-color !important;
			}
			.none-color{
				color: #e4e7ed !important;
			}
			/* 连接线 */
			.tail {
				position: absolute;
				left: 20rpx;
				height: 100%;
				border-left: 4rpx solid #e4e7ed
			}
			/* 初始圆点底色 */
			.node {
				left: 10rpx;
				width: 24rpx;
				height: 24rpx;
				position: absolute;
				background-color: #e4e7ed;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.wrapper {
				position: relative;
				padding-left: 50rpx;
				// top: 5rpx;
				.wrapperTitle{
					color: #AAAAAA;
				}
			}
		}
		.isshow {
			display: none;
		}
</style>
